<template>
  <div class="propertyAcceptancePage">
    <div class="search-box d-flex a-center">
      <span class="search-label m-r10">关键字</span>
      <el-input class="search-input" v-model="searchValue" clearable placeholder="请输入合同名/资产名/街道/项目名"></el-input>
      <el-button color="#ff7b50" class="search-query-btn m-l10" @click="onSearchBtn">搜索</el-button>
    </div>
    <public-table
        border
        :header-cell-style="{'background':'#F5F5F5'}"
        :index="false"
        :tableData="tableData"
        :tableOption.sync="tableOption"
        @page-change="onPageChange"
    >
      <template #buttons="scope">
        <el-button @click="toPropertyAcceptance(scope.row)">物业验收</el-button>
      </template>
    </public-table>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue";
import {collaborativeApproval} from "@/api/coordination";
import PublicTable from "@/components/PublicTable";
import {useRouter} from "vue-router";

const searchValue = ref('');
const page = reactive({
  total: 0,
  current: 1,
  size: 10
});
const tableData = ref([]);

const tableOption = ref([
  { label: '合同名称', prop: 'contractName' },
  { label: '项目名称', prop: 'projectName' },
  { label: '资产位置', prop: 'street' },
  { label: '面积', prop: 'area'},
  { label: '物业审核状态', prop: 'acceptanceStatus',formatter:(val,row)=>{
      let arr = ['','待审核','通过','驳回'];
      return arr[val] || '-';
    } },
  {
    label: '操作',
    slot: true,
    width: 300,
    overHidden:false,
    slotName: 'buttons',
      fixed: "right"
  }
]);

// 获取物业交接列表
const getPropertyAcceptance = (params) => {
  collaborativeApproval.getPropertyAcceptance(params).then(res=>{
    page.total = res.data.totalSize;
    tableData.value = res.data.content;
  });
}

// 分页
const onPageChange = (val) => {
  page.current = val.page;
  page.size = val.limit;

  getPropertyAcceptance({
    pageNum:val.page,
    pageSize:val.limit,
    param:{
      queryName:searchValue.value || '',
    }
  });
}

// 搜索
const onSearchBtn = () => {
  getPropertyAcceptance({
    pageNum:1,
    pageSize:10,
    param:{
      queryName:searchValue.value || '',
    }
  });
}

const router = useRouter();
// 跳转物业验收页面
const toPropertyAcceptance = (row) => {
  router.push({ path: `/asset/management/propertyAcceptance/${row.contractId}/${row.acceptanceStatus}/${convert(row.adjunctUrl)}`});
}
const convert=(url)=>{
  if(!url){
    return '1'
  }
  return  url.replaceAll("/","@")
}

onMounted(()=>{
  getPropertyAcceptance({
    pageNum:1,
    pageSize:10,
  });
});
</script>

<style lang="scss" scoped>
.propertyAcceptancePage{
  .search-box{
    margin-bottom: 12px;
    .search-label{
      font-weight: 600;
    }
    .search-input{
      width: 25%;
    }
    .search-query-btn{
      color: #FFFFFF;
    }
  }
}
</style>
